<template>
    <transition name="el-fade-in-linear">
        <div 
        v-show="show"
        class="fixed-left-nav"
        >
            <template 
            v-for="(item ,index) in data"
            >
                <div 
                v-if="item.isShow" 
                :key="index" 
                class="item"
                @click="clickHandler(item, index)"
                >
                    {{item.title}}

                    <i class="el-icon-arrow-down"></i>
                </div>
            </template>
        </div>
    </transition>
</template>

<script>
import MODEL_MIXIN from '@mixins/model.js';

export default {
    mixins: [MODEL_MIXIN],
    props: {
        data: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            observe: null,

            show: true,
        };
    },
    methods: {
        clickHandler(item, index) {
            this.model = item.id;

            var el = document.querySelector('.left-bottom');

            el.scrollIntoView({
                behavior: 'smooth',
                block: 'start',
                inline: 'start',
            });
        },
    },
    mounted() {
        this.observe = new IntersectionObserver(e => {
            let [target] = e,
                {isIntersecting} = target;

            this.show = !isIntersecting;
        });

        var el = document.querySelector('.bidding-content .left .left-bottom');

        this.observe.observe(el)
    },
    beforeDestroy() {
        this.observe.disconnect();
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .fixed-left-nav{
        $fs: 14px;
        $pd: 9px;
        $parentPd: 20px;

        position: fixed;
        top: $topNavBarHeight + 128px;
        margin-left: -($fs + $pd + $pd + $parentPd);

        .item{
            width: 1em;
            line-height: 1.2em;
            box-sizing: content-box;
            color: $primaryColor;
            background: $primaryColor3;
            font-size: $fs;
            padding: $pd;
            border-radius: 4px 0 0 4px;
            cursor: pointer;

            & + .item{
                margin-top: 8px;
            }
        }
    }

    @media screen and (max-width:1240px) {
        .fixed-left-nav{
            left: 0;
            margin-left: 0;

            .item{
                border-radius: 0 4px 4px 0;
                padding: 6px;
            }
        }
    }
</style>